<template>
  <div>
    <el-row style="background-color: #001529; cursor: pointer">
      <el-col :span="4" class="left" @click.native="toHome">X23 Project</el-col>
      <el-col :span="20">
        <div class="right">
          <el-dropdown class="userinfo" @command="handleCommand">
            <div>
              {{ user.name }}
              <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="my"
                ><i class="el-icon-user"></i>个人中心</el-dropdown-item
              >
              <el-dropdown-item command="setting">
                <i class="el-icon-setting"></i>修改密码
              </el-dropdown-item>
              <el-dropdown-item command="logout" divided>
                <i class="el-icon-remove-outline"></i>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      title="修改密码"
      :visible.sync="dialogFormVisible"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="dialogform" :rules="rules" ref="dialogform">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input
            show-password
            v-model="dialogform.oldPassword"
            autocomplete="off"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            show-password
            v-model="dialogform.newPassword"
            autocomplete="off"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="newPassword2">
          <el-input
            show-password
            v-model="dialogform.newPassword2"
            autocomplete="off"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDialogFormVisible"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { UpdatePassword } from "@/api/user";

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        if (this.dialogform.newPassword2 !== "") {
          this.$refs.dialogform.validateField("newPassword2");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.dialogform.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      dialogFormVisible: false,
      dialogform: { oldPassword: "", newPassword: "", newPassword2: "" },
      rules: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newPassword: [
          { validator: validatePass, trigger: "blur" },
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        newPassword2: [
          { validator: validatePass2, trigger: "blur" },
          { required: true, message: "", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    toHome() {
      console.log("toHometoHometoHometoHometoHometoHome", this.$route.path);

      if (this.$route.path != "/home") {
        this.$router.push("/home");
      }
    },
    handleCommand(command) {
      switch (command) {
        case "logout":
          this.logout();
          break;
        case "setting":
          this.setting();
          break;
        case "my":
          this.my();
          break;
        default:
          break;
      }
    },

    logout() {
      this.$store.dispatch("LogoutFun").then((response) => {
        this.$router.push("/login");
        this.$message({
          message: "退出成功！",
          type: "success",
        });
      });
    },
    setting() {
      this.dialogFormVisible = true;
    },
    my() {
      alert("正在开发中~");
    },
    async handleDialogFormVisible() {
      this.$refs["dialogform"].validate(async (valid) => {
        if (valid) {
          await UpdatePassword({
            oldPassword: this.dialogform.oldPassword,
            newPassword: this.dialogform.newPassword,
          });
          this.logout();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      // this.dialogFormVisible = false;
    },
  },
  //计算属性
  computed: {
    ...mapGetters(["user"]),
  },
};
</script>

<style lang="less" scoped>
.left {
  /* background-color: #33a3dc; */
  min-width: 200px;
  height: 48px;
  font-weight: 600;
  font-size: 18px;
  line-height: 48px;
  padding-left: 20px;
  color: white;
}
.right {
  color: white;
  line-height: 48px;
  display: flex;
  justify-content: flex-end;
  align-content: center;
  padding-right: 25px;
}
.userinfo {
  width: 100px;
  color: white;
  div {
    text-align: center;
  }
}
.el-dropdown-menu__item i {
  margin-right: 10px;
  margin-left: -5px;
}
</style>